<script setup>
import { computed, onMounted, ref, watch } from 'vue'
// import { useRoute, useRouter } from 'vue-router'
// import { useStore } from 'vuex'
// import { useI18n } from 'vue-i18n'
// import { useMessage } from 'naive-ui'
// import { useEventListener } from '@vueuse/core'
// import { useScrollTo } from '@vueuse/core'
// import { useWindowSize } from '@vueuse/core'
import icon_house from '@/assets/imgs/bt_sy.png'
import { projectInfoSelected, projectDetailVisible } from './ProjectDetailStore'
import ProjectBaseinfo from './ProjectBaseinfo.vue'
import ProjectPrevInfo from './ProjectPrevInfo.vue'
import ProjectConstructionManagement from './ProjectConstructionManagement.vue'
import ProjectCompletedAcceptance from './ProjectCompletedAcceptance.vue'
import ProjectAttendanceRecord from './ProjectAttendanceRecord.vue'
import { getInfoByPkid, getAttendanceRecord, getConstructionManagement } from '@/views/new-screen/info-construction-projects/api'

const props = defineProps({
    data: Object,
})

const menuList = ref([
    { key: 'base-info', title: '基础信息', img: icon_house },
    { key: 'base-info', title: '前期信息', img: icon_house },
    { key: 'base-info', title: '施工管理', img: icon_house },
    { key: 'base-info', title: '竣工验收', img: icon_house },
    { key: 'base-info', title: '视频监控', img: icon_house },
    { key: 'base-info', title: '环境监测', img: icon_house },
    { key: 'base-info', title: '考勤情况', img: icon_house },
    { key: 'base-info', title: '工程管理', img: icon_house },
])
const activeMemu = ref('基础信息')

const handleMenuClick = (item) => {
  activeMemu.value = item.title
}

const handleBack = () => {
    console.log('handleBack')
    projectDetailVisible.value = false
}

const constructionManagement = ref([])
const reqConstructionManagement = () =>{
    Promise.all([
        getConstructionManagement({ projectId: projectInfoSelected.value, pageIndex: 1, pageSize: 999, recordType: '不合格记录' }),
        getConstructionManagement({ projectId: projectInfoSelected.value, pageIndex: 1, pageSize: 999, recordType: '验收记录' }),
        getConstructionManagement({ projectId: projectInfoSelected.value, pageIndex: 1, pageSize: 999, recordType: '抽查记录' }),
        getConstructionManagement({ projectId: projectInfoSelected.value, pageIndex: 1, pageSize: 999, recordType: '现场执法记录' }),
    ]).then((res) => {
        if (res[0].success) {
            constructionManagement.value[0] = res[0].data.list ?? []
        }
        if (res[1].success) {
            constructionManagement.value[1] = res[1].data.list ?? []
        }
        if (res[2].success) {
            constructionManagement.value[2] = res[2].data.list ?? []
        }
        if (res[3].success) {
            constructionManagement.value[3] = res[3].data.list ?? []
        }
        console.log('constructionManagement.value', constructionManagement.value)
    })
}

const attendanceRecord = ref([])
const reqAttendanceRecode = () =>{
    getAttendanceRecord({ projectId: projectInfoSelected.value, pageIndex: 1, pageSize: 999 })
        .then((res) => {
            attendanceRecord.value = res.data.list
            console.log('reqAttendanceRecode', res.data)
        })
}

const reqDetail = (pkid) => {
    activeMemu.value = '基础信息'
    getInfoByPkid({ pkid })
        .then((res) => {
            detailData.value = res.data
        })

}

const detailData = ref({})

onMounted(() => {
    console.log('projecdetail mounted', projectInfoSelected)
    // projectInfoSelected.value = '6127f696-2921-4927-a107-ae522a762dfc'
    reqDetail(projectInfoSelected.value)
    reqAttendanceRecode()
    reqConstructionManagement()
})

</script>

<template>
    <div class="detail-wrap">
        <div class="btn-back" @click.native="handleBack">
            <span style="transform: rotate(180deg);margin-right: 10px;">➤</span> 
            返回
        </div>
        <div class="content">
            <div class="left menu-list" >
                <div  v-for="menu in menuList" :key="menu.title" class="menu-item" :class="menu.title === activeMemu ? 'active' : ''" @click="handleMenuClick(menu)">
                    <img class="menu-img" :src="menu.img" alt="">
                    <span class="menu-title">
                        {{ menu.title }}
                    </span>
                </div>
            </div>
            <div class="mid info-panel" >
                <ProjectBaseinfo v-show="activeMemu == '基础信息'" :data="detailData" />
                <ProjectPrevInfo v-show="activeMemu == '前期信息'" :data="detailData" />
                <ProjectConstructionManagement v-show="activeMemu == '施工管理'" :data="constructionManagement" />
                <ProjectCompletedAcceptance v-show="activeMemu == '竣工验收'" :data="detailData" />
                <ProjectAttendanceRecord v-show="activeMemu == '考勤情况'" :data="attendanceRecord" />
            </div>
            <div class="right map-container">

            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .detail-wrap {
        position: fixed;
        left: 0;
        top: 90px;
        width: 100%;
        height: calc(100% - 90px);
        padding: 0 20px 20px 20px;
        background: #081331cc;
        z-index: 9999;
        pointer-events: all;
        .btn-back {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            color: #19E6E3;
            cursor: pointer;
            line-height: 32px;
            height: 32px;
        }

        .content {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: calc(100% - 32px);
            gap: 20px;

            .menu-list {
                flex: 1;
                height: 100%;
                padding: 20px;
                box-sizing: border-box;
                border: 1px solid #495B73ab;
                .menu-item {
                    position: relative;
                    margin-bottom: 24px;
                    width: 100%;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    color: #fff;
                    box-sizing: border-box;
                    cursor: pointer;
                    .menu-img {
                        width: 32px;
                        height: 32px;
                    }
                    &.active {
                        border: 1px solid #1EFFF9;
                    }
                    &.active::after {
                        content: '';
                        position: absolute;
                        left: -10px;
                        width: 3px;
                        height: 100%;
                        background: #1EFFF9;
                    }
                }
            }
            .map-container,
            .info-panel {
                flex: 4;
                height: 100%;
                background: #08133166;
                border: 1px solid #495B73ab;
            }
        }
    }
</style>
